<template>
  <div class="message-notification">
    <!-- 消息图标按钮 -->
    <div
      class="message-icon-wrapper"
      :class="{ 'has-unread': unreadCount > 0 }"
      @click="toggleMessageDialog"
    >
      <svg class="message-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path
          d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
        />
      </svg>
      <!-- 未读消息数量 -->
      <span v-if="unreadCount > 0" class="unread-badge">{{ unreadCount }}</span>
    </div>

    <!-- 侧边栏遮罩层 -->
    <Teleport to="body">
      <div v-if="dialogVisible" class="sidebar-overlay" @click="closeSidebar"></div>
    </Teleport>

    <!-- 侧边栏消息面板 -->
    <Teleport to="body">
      <transition name="sidebar-slide">
        <div v-if="dialogVisible" class="message-sidebar" @click.stop>
          <!-- 侧边栏头部 -->
          <div class="sidebar-header">
            <h3>我的消息</h3>
            <button class="close-btn" @click="closeSidebar">
              <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path
                  d="M18 6L6 18M6 6L18 18"
                  stroke="currentColor"
                  stroke-width="2"
                  stroke-linecap="round"
                />
              </svg>
            </button>
          </div>

          <!-- 操作按钮 -->
          <div class="sidebar-actions">
            <button class="green-btn" @click="markAllAsRead" :disabled="messages.length === 0">
              全部已读
            </button>
            <button class="danger-btn" @click="deleteAllMessages" :disabled="messages.length === 0">
              清空消息
            </button>
          </div>

          <!-- 消息列表 -->
          <div class="sidebar-content" v-loading="loading">
            <div v-if="messages.length === 0" class="empty-state">
              <svg
                class="empty-icon"
                viewBox="0 0 24 24"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"
                  stroke="#ccc"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                />
              </svg>
              <p>暂无消息</p>
              <span class="empty-tip">这里会显示您的系统通知、审核结果等信息</span>
            </div>

            <div class="sidebar-list">
              <div
                v-for="message in messages"
                :key="message.id"
                class="sidebar-message-item"
                :class="{ unread: !message.isRead, clickable: message.relatedId }"
                @click="message.relatedId ? handleMessageClick(message) : markAsRead(message.id)"
              >
                <div class="message-content">
                  <div class="message-header">
                    <span class="message-type-tag" :class="message.type.toLowerCase()">{{
                      getTypeText(message.type)
                    }}</span>
                    <span class="message-time">{{ formatTime(message.createTime) }}</span>
                  </div>
                  <div class="message-title">{{ message.title }}</div>
                  <p class="message-text">{{ message.content }}</p>

                  <!-- 审核消息的音乐资源 -->
                  <div
                    v-if="message.type === 'AUDIT' && message.resourceData"
                    class="message-resource music-resource"
                  >
                    <img
                      :src="getCoverUrl(message.resourceData)"
                      :alt="message.resourceData.title"
                      class="resource-cover"
                      @error="handleImageError"
                    />
                    <div class="resource-info">
                      <div class="resource-title">{{ message.resourceData.title }}</div>
                      <div class="resource-artist">{{ message.resourceData.artist }}</div>
                    </div>
                  </div>

                  <!-- 关注消息的用户资源 -->
                  <div
                    v-if="message.type === 'FOLLOW' && message.resourceData"
                    class="message-resource user-resource"
                  >
                    <img
                      :src="getAvatarUrl(message.resourceData)"
                      :alt="message.resourceData.nickname || message.resourceData.username"
                      class="resource-avatar"
                      @error="handleImageError"
                    />
                    <div class="resource-info">
                      <div class="resource-name">
                        {{ message.resourceData.nickname || message.resourceData.username }}
                      </div>
                    </div>
                  </div>
                </div>
                <div class="message-actions-item">
                  <el-button
                    v-if="!message.isRead"
                    type="success"
                    size="small"
                    @click.stop="markAsRead(message.id)"
                    class="action-btn mark-read-btn"
                  >
                    已读
                  </el-button>
                  <el-button
                    type="danger"
                    size="small"
                    @click.stop="deleteMessage(message.id)"
                    class="action-btn delete-btn"
                  >
                    删除
                  </el-button>
                </div>
              </div>

              <!-- 加载更多 - 作为消息列表的最后一条 -->
              <div v-if="hasMore" class="load-more-item">
                <a
                  href="#"
                  class="load-more-link"
                  :class="{ disabled: loadingMore }"
                  @click.prevent="loadMoreMessages"
                >
                  {{ loadingMore ? '加载中...' : '加载更多' }}
                </a>
              </div>

              <!-- 加载完成提示 - 作为消息列表的最后一条 -->
              <div v-else-if="messages.length > 0" class="load-complete-item">
                已加载 {{ messages.length }} 条消息
              </div>
            </div>
          </div>
        </div>
      </transition>
    </Teleport>
  </div>
</template>

<script setup>
import { ref, onMounted, computed, watch } from 'vue'
import { ElMessage } from 'element-plus'
import { useUserStore } from '@/stores/user'
import { useRouter } from 'vue-router'
import { eventBus } from '@/utils/eventBus'
import {
  getMessages,
  getUnreadMessageCount,
  markMessageAsRead,
  markAllMessagesAsRead,
  deleteMessage as deleteMessageApi,
  deleteAllMessages as deleteAllMessagesApi,
} from '@/api/message'
import { getMusicById } from '@/api/music'
import { getUserInfoById } from '@/api/user'

// 用户状态
const userStore = useUserStore()
const isLoggedIn = computed(() => userStore.isLoggedIn)
const router = useRouter()

// 响应式数据
const dialogVisible = ref(false)
const messages = ref([])
const unreadCount = ref(0)
const loading = ref(false)
const loadingMore = ref(false)
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)
const hasMore = ref(false)

// 方法
const toggleMessageDialog = () => {
  dialogVisible.value = !dialogVisible.value
  if (dialogVisible.value) {
    loadMessages()
  }
}

const closeSidebar = () => {
  dialogVisible.value = false
}

const loadMessages = async () => {
  loading.value = true
  try {
    const res = await getMessages({
      page: 1,
      size: pageSize.value,
      pageNum: 1,
      pageSize: pageSize.value,
    })
    if (res.data) {
      // 尝试多种可能的返回格式
      let data = []
      let totalCount = 0

      if (Array.isArray(res.data)) {
        data = res.data
        totalCount = data.length
      } else if (res.data.data && Array.isArray(res.data.data)) {
        data = res.data.data
        totalCount = res.data.total || res.data.totalCount || res.data.totalElements || data.length
      } else if (res.data.list && Array.isArray(res.data.list)) {
        data = res.data.list
        totalCount = res.data.total || res.data.totalCount || res.data.totalElements || data.length
      } else if (res.data.records && Array.isArray(res.data.records)) {
        data = res.data.records
        totalCount = res.data.total || res.data.totalCount || res.data.totalElements || data.length
      } else {
        data = Array.isArray(res.data) ? res.data : []
        totalCount = data.length
      }

      messages.value = data
      total.value = totalCount
      currentPage.value = 1

      // 如果返回的数据条数等于pageSize，说明可能有更多数据
      // 即使totalCount未知，也显示加载更多按钮
      if (totalCount > 0 && totalCount > data.length) {
        hasMore.value = true
      } else if (data.length === pageSize.value) {
        // 返回了满页数据，可能有更多
        hasMore.value = true
      } else {
        hasMore.value = false
      }
    }
    // 为需要资源数据的消息加载额外信息
    await loadMessageResources()
  } catch (error) {
    console.error('获取消息失败:', error)
    ElMessage.error('获取消息失败')
  } finally {
    loading.value = false
  }
}

// 加载消息相关资源数据
const loadMessageResources = async () => {
  for (const message of messages.value) {
    if (message.relatedId && message.relatedId > 0) {
      try {
        if (message.type === 'AUDIT') {
          // 审核消息加载音乐信息
          const musicResponse = await getMusicById(message.relatedId)
          message.resourceData = musicResponse.data
        } else if (message.type === 'FOLLOW') {
          // 关注消息加载用户信息
          const userResponse = await getUserInfoById(message.relatedId)
          message.resourceData = userResponse.data
        }
      } catch (error) {
        console.error('加载资源数据失败:', error)
      }
    }
  }
}

const loadUnreadCount = async () => {
  try {
    const res = await getUnreadMessageCount()
    unreadCount.value = res.data || 0
  } catch (error) {
    console.error('获取未读消息数量失败:', error)
  }
}

const markAsRead = async (messageId) => {
  try {
    await markMessageAsRead(messageId)
    ElMessage.success('已标记为已读')
    // 更新本地数据
    const message = messages.value.find((m) => m.id === messageId)
    if (message) {
      message.isRead = true
    }
    unreadCount.value = Math.max(0, unreadCount.value - 1)
  } catch (error) {
    console.error('标记已读失败:', error)
    ElMessage.error('标记已读失败')
  }
}

const markAllAsRead = async () => {
  try {
    await markAllMessagesAsRead()
    ElMessage.success('已全部标记为已读')
    // 更新所有消息状态
    messages.value.forEach((message) => {
      message.isRead = true
    })
    unreadCount.value = 0
  } catch (error) {
    console.error('全部已读失败:', error)
    ElMessage.error('全部已读失败')
  }
}

const deleteMessage = async (messageId) => {
  try {
    // 直接删除，无需确认弹窗
    await deleteMessageApi(messageId)
    ElMessage.success('删除成功')

    // 从列表中移除
    messages.value = messages.value.filter((m) => m.id !== messageId)
    total.value = Math.max(0, total.value - 1)

    // 重新计算未读数量
    await loadUnreadCount()
  } catch (error) {
    console.error('删除消息失败:', error)
    ElMessage.error('删除消息失败')
  }
}

const deleteAllMessages = async () => {
  try {
    await deleteAllMessagesApi()
    ElMessage.success('已全部清空')
    messages.value = []
    total.value = 0
    unreadCount.value = 0
  } catch (error) {
    console.error('清空消息失败:', error)
    ElMessage.error('清空消息失败')
  }
}

const handlePageChange = (page) => {
  currentPage.value = page
  loadMessages()
}

const loadMoreMessages = async () => {
  if (loadingMore.value) return

  loadingMore.value = true
  try {
    const nextPage = currentPage.value + 1
    const res = await getMessages({
      page: nextPage,
      size: pageSize.value,
      pageNum: nextPage,
      pageSize: pageSize.value,
    })

    if (res.data) {
      // 尝试多种可能的返回格式
      let newMessages = []
      let totalCount = 0

      if (Array.isArray(res.data)) {
        newMessages = res.data
        totalCount = newMessages.length
      } else if (res.data.data && Array.isArray(res.data.data)) {
        newMessages = res.data.data
        totalCount =
          res.data.total || res.data.totalCount || res.data.totalElements || newMessages.length
      } else if (res.data.list && Array.isArray(res.data.list)) {
        newMessages = res.data.list
        totalCount =
          res.data.total || res.data.totalCount || res.data.totalElements || newMessages.length
      } else if (res.data.records && Array.isArray(res.data.records)) {
        newMessages = res.data.records
        totalCount =
          res.data.total || res.data.totalCount || res.data.totalElements || newMessages.length
      } else {
        newMessages = Array.isArray(res.data) ? res.data : []
        totalCount = newMessages.length
      }

      // 追加新消息到现有列表
      messages.value.push(...newMessages)
      currentPage.value = nextPage

      // 判断是否还有更多数据
      if (totalCount > 0 && messages.value.length < totalCount) {
        hasMore.value = true
      } else if (newMessages.length === pageSize.value) {
        // 如果这次返回了满页数据，可能有更多
        hasMore.value = true
      } else {
        hasMore.value = false
      }

      // 为新加载的消息加载资源数据
      for (const message of newMessages) {
        if (message.relatedId && message.relatedId > 0) {
          try {
            if (message.type === 'AUDIT') {
              const musicResponse = await getMusicById(message.relatedId)
              message.resourceData = musicResponse.data
            } else if (message.type === 'FOLLOW') {
              const userResponse = await getUserInfoById(message.relatedId)
              message.resourceData = userResponse.data
            }
          } catch (error) {
            console.error('加载资源数据失败:', error)
          }
        }
      }
    }
  } catch (error) {
    console.error('加载更多消息失败:', error)
    ElMessage.error('加载更多消息失败')
  } finally {
    loadingMore.value = false
  }
}

// 获取头像URL
const getAvatarUrl = (userData) => {
  if (!userData) return '/default-avatar.png'

  // 处理不同的数据结构
  const avatar = userData.avatar || userData.avatarUrl || userData.profilePicture
  if (!avatar) return '/default-avatar.png'

  // 处理完整的URL和相对路径
  if (avatar.startsWith('http')) {
    return avatar
  } else if (avatar.startsWith('/')) {
    return avatar
  } else {
    return '/' + avatar
  }
}

// 获取音乐封面URL
const getCoverUrl = (musicData) => {
  if (!musicData) return '/default-cover.png'

  // 处理不同的数据结构
  const cover = musicData.coverUrl || musicData.cover || musicData.image
  if (!cover) return '/default-cover.png'

  // 处理完整的URL和相对路径
  if (cover.startsWith('http')) {
    return cover
  } else if (cover.startsWith('/')) {
    return cover
  } else {
    return '/' + cover
  }
}

// 处理图片加载错误
const handleImageError = (event) => {
  // 根据图片类型设置不同的默认图片
  const img = event.target
  if (img.classList.contains('resource-cover')) {
    img.src = '/default-cover.png'
  } else {
    img.src = '/default-avatar.png'
  }
}

const formatTime = (timestamp) => {
  if (!timestamp) return ''
  const date = new Date(timestamp)
  const now = new Date()
  const diff = now - date

  // 如果是今天
  if (diff < 24 * 60 * 60 * 1000 && date.getDate() === now.getDate()) {
    return date.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })
  }

  // 如果是昨天
  if (diff < 48 * 60 * 60 * 1000) {
    return '昨天'
  }

  // 其他时间
  return date.toLocaleDateString('zh-CN')
}

const getTypeText = (type) => {
  const typeMap = {
    SYSTEM: '系统',
    AUDIT: '审核',
    FOLLOW: '关注',
  }
  return typeMap[type] || '消息'
}

// 处理消息点击
const handleMessageClick = async (message) => {
  try {
    // 标记为已读
    if (!message.isRead) {
      await markAsRead(message.id)
    }

    // 根据消息类型跳转
    if (message.type === 'AUDIT' && message.relatedId) {
      // 审核消息跳转到音乐详情
      router.push(`/music/${message.relatedId}`)
      closeSidebar()
    } else if (message.type === 'FOLLOW' && message.relatedId) {
      // 关注消息跳转到用户主页
      router.push(`/profile/${message.relatedId}`)
      closeSidebar()
    }
  } catch (error) {
    console.error('处理消息点击失败:', error)
  }
}

// 监听WebSocket消息
const handleWebSocketMessage = (data) => {
  try {
    if (data.event === 'NEW_MESSAGE') {
      // 实时更新未读数量
      loadUnreadCount()
      // 如果消息面板已打开，刷新消息列表
      if (dialogVisible.value) {
        loadMessages()
      }
    }
  } catch (error) {
    console.error('解析WebSocket消息失败:', error)
  }
}

// 生命周期
onMounted(() => {
  loadUnreadCount()

  // 监听WebSocket消息
  eventBus.on('websocket-message', handleWebSocketMessage)

  // 每30秒刷新一次未读数量（作为后备方案）
  const interval = setInterval(() => {
    loadUnreadCount()
  }, 30000)

  // 清理定时器和监听器
  return () => {
    clearInterval(interval)
    eventBus.off('websocket-message', handleWebSocketMessage)
  }
})

// 监听登录状态变化
watch(isLoggedIn, (newVal) => {
  if (newVal) {
    loadUnreadCount()
  } else {
    unreadCount.value = 0
    messages.value = []
  }
})
</script>

<style scoped>
/* 消息图标样式 */
.message-notification {
  position: relative;
  z-index: 200;
}

.message-icon-wrapper {
  position: relative;
  cursor: pointer;
  padding: 8px;
  border-radius: 50%;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px; /* 向下微调 */
}

.message-icon-wrapper:hover {
  background-color: #e6f7e6;
  transform: scale(1.05);
}

.message-icon-wrapper.has-unread {
  animation: bounce 2s infinite;
}

.message-icon-wrapper.has-unread .message-icon {
  color: #ff4444;
  filter: drop-shadow(0 0 3px rgba(255, 68, 68, 0.5));
}

@keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-3px);
  }
  60% {
    transform: translateY(-2px);
  }
}

.message-icon {
  width: 20px;
  height: 20px;
  color: #00c851;
  transition: color 0.3s ease;
}

.message-icon-wrapper:hover .message-icon {
  color: #008f3f;
}

.unread-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  background: #ff4444;
  color: white;
  border-radius: 50%;
  min-width: 16px;
  height: 16px;
  font-size: 11px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

/* 侧边栏样式 - 参考播放器播放列表 */
.sidebar-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
  backdrop-filter: blur(2px);
}

.message-sidebar {
  position: fixed;
  top: 0;
  right: 0;
  width: 380px;
  height: 100vh;
  background: white;
  box-shadow: -2px 0 12px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  display: flex;
  flex-direction: column;
}

.sidebar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid #e6f7e6;
  background: linear-gradient(135deg, #f6fff6 0%, #e6f7e6 100%);
  flex-shrink: 0;
}

.sidebar-header h3 {
  margin: 0;
  color: #00c851;
  font-weight: 600;
  font-size: 18px;
}

.close-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  border-radius: 50%;
  transition: all 0.3s ease;
  color: #666;
}

.close-btn:hover {
  background: #e6f7e6;
  color: #00c851;
}

.close-btn svg {
  width: 20px;
  height: 20px;
}

.sidebar-actions {
  padding: 16px 24px;
  display: flex;
  gap: 12px;
  background: white;
  border-bottom: 1px solid #e6f7e6;
  flex-shrink: 0;
}

.green-btn,
.danger-btn {
  padding: 8px 16px;
  border: none;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 80px;
}

.green-btn {
  background: linear-gradient(135deg, #00c851, #00a041);
  color: white;
}

.green-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #00a041, #008f3f);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 200, 81, 0.3);
}

.danger-btn {
  background: linear-gradient(135deg, #ff6b6b, #ff5252);
  color: white;
}

.danger-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #ff5252, #ff4444);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(255, 107, 107, 0.3);
}

.green-btn:disabled,
.danger-btn:disabled {
  background: #f5f5f5;
  color: #ccc;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.sidebar-content {
  flex: 1;
  overflow-y: auto;
  background: #fafafa;
}

.sidebar-list {
  padding: 8px 0;
}

.sidebar-message-item {
  display: flex;
  flex-direction: column;
  padding: 16px 24px;
  border-bottom: 1px solid #f0f0f0;
  transition: all 0.3s ease;
  background: white;
  margin: 8px 16px;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.sidebar-message-item:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transform: translateY(-1px);
}

.sidebar-message-item.unread {
  background: linear-gradient(135deg, #f6fff6 0%, #ffffff 100%);
  border-left: 3px solid #00c851;
}

.sidebar-pagination {
  padding: 16px 24px;
  display: flex;
  justify-content: center;
  background: white;
  border-top: 1px solid #e6f7e6;
  flex-shrink: 0;
}

.load-more-item {
  padding: 20px 24px;
  text-align: center;
  border-bottom: 1px solid #f0f0f0;
  background: white;
}

.load-more-item .load-more-link {
  color: #00c851;
  font-size: 13px;
  text-decoration: none;
  cursor: pointer;
}

.load-more-item .load-more-link.disabled {
  color: #999;
  cursor: not-allowed;
  text-decoration: none;
}

.load-complete-item {
  padding: 20px 24px;
  font-size: 12px;
  color: #999;
  text-align: center;
  border-bottom: 1px solid #f0f0f0;
  background: white;
}

/* 移除旧的悬浮样式 */
.sidebar-pagination {
  display: none;
}

.pagination-container {
  display: none;
}

.load-complete-text {
  display: none;
}

.load-more-inline {
  display: none;
}

.load-complete-inline {
  display: none;
}

.pagination-info {
  color: #666;
  font-size: 14px;
  font-weight: 500;
}

/* 侧边栏动画 */
.sidebar-slide-enter-active,
.sidebar-slide-leave-active {
  transition: transform 0.3s ease;
}

.sidebar-slide-enter-from,
.sidebar-slide-leave-to {
  transform: translateX(100%);
}

/* 操作按钮区域 */
.message-actions {
  padding: 16px 24px;
  display: flex;
  gap: 12px;
  background: white;
  border-bottom: 1px solid #e6f7e6;
}

.message-actions .el-button--primary {
  background: #00c851;
  border-color: #00c851;
}

.message-actions .el-button--primary:hover {
  background: #008f3f;
  border-color: #008f3f;
}

.message-actions .el-button--danger {
  background: #ff4444;
  border-color: #ff4444;
}

.message-actions .el-button--danger:hover {
  background: #cc0000;
  border-color: #cc0000;
}

/* 消息列表 */
.message-list {
  max-height: 400px;
  overflow-y: auto;
  background: white;
}

.message-list::-webkit-scrollbar {
  width: 6px;
}

.message-list::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.message-list::-webkit-scrollbar-thumb {
  background: #00c851;
  border-radius: 3px;
}

.message-list::-webkit-scrollbar-thumb:hover {
  background: #008f3f;
}

/* 空状态 */
.empty-state {
  text-align: center;
  padding: 80px 20px;
  color: #999;
}

.empty-icon {
  width: 64px;
  height: 64px;
  color: #ccc;
  margin-bottom: 16px;
  opacity: 0.6;
}

.empty-state p {
  font-size: 18px;
  color: #666;
  margin: 0 0 8px 0;
  font-weight: 500;
}

.empty-tip {
  font-size: 14px;
  color: #999;
  display: block;
}

/* 消息项 */
.message-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 20px 24px;
  border-bottom: 1px solid #f0f0f0;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.message-item:hover {
  background: #f6fff6;
  transform: translateX(2px);
}

.message-item.unread {
  background: linear-gradient(90deg, rgba(0, 200, 81, 0.05) 0%, transparent 100%);
  border-left: 3px solid #00c851;
}

.message-item.unread::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 3px;
  height: 100%;
  background: #00c851;
  animation: slideIn 0.3s ease;
}

@keyframes slideIn {
  from {
    width: 0;
  }
  to {
    width: 3px;
  }
}

.message-content {
  flex: 1;
  margin-right: 12px;
}

.message-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.message-title {
  font-weight: 600;
  color: #333;
  font-size: 15px;
  line-height: 1.4;
}

.message-item.unread .message-title {
  color: #00c851;
}

.message-time {
  font-size: 12px;
  color: #999;
  white-space: nowrap;
}

.message-type-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px;
  margin-right: 8px;
  font-weight: 500;
}

.message-type-tag.system {
  background: linear-gradient(135deg, #00c851, #00a041);
  color: white;
}

.message-type-tag.audit {
  background: linear-gradient(135deg, #ff9800, #f57c00);
  color: white;
}

.message-type-tag.follow {
  background: linear-gradient(135deg, #2196f3, #1976d2);
  color: white;
}

.message-type-tag.like {
  background: linear-gradient(135deg, #e91e63, #c2185b);
  color: white;
}

.message-type-tag.comment {
  background: linear-gradient(135deg, #9c27b0, #7b1fa2);
  color: white;
}

.message-type-tag.share {
  background: linear-gradient(135deg, #607d8b, #455a64);
  color: white;
}

.message-text {
  margin: 0;
  color: #666;
  font-size: 14px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 消息操作按钮 */
.message-actions-item {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 8px;
}

.action-btn {
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 500;
  border-radius: 16px;
  transition: all 0.3s ease;
  min-width: 60px;
}

.mark-read-btn {
  background: linear-gradient(135deg, #00c851, #00a041);
  border-color: #00c851;
  color: white;
}

.mark-read-btn:hover {
  background: linear-gradient(135deg, #00a041, #008f3f);
  border-color: #00a041;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 200, 81, 0.3);
}

.delete-btn {
  background: linear-gradient(135deg, #ff6b6b, #ff5252);
  border-color: #ff6b6b;
  color: white;
}

.delete-btn:hover {
  background: linear-gradient(135deg, #ff5252, #ff4444);
  border-color: #ff5252;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(255, 107, 107, 0.3);
}

/* 分页 */
.pagination-wrapper {
  padding: 20px 24px;
  display: flex;
  justify-content: center;
  background: white;
  border-top: 1px solid #e6f7e6;
}

.pagination-wrapper :deep(.el-pagination.is-background .el-pager li:not(.disabled).active) {
  background-color: #00c851;
  color: white;
}

.pagination-wrapper :deep(.el-pagination.is-background .el-pager li:hover) {
  color: #00c851;
}

/* 消息资源样式 */
.message-resource {
  margin-top: 12px;
  padding: 12px;
  background: #f8f9fa;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.message-resource:hover {
  background: #e8f5e8;
  transform: translateY(-1px);
}

.resource-cover,
.resource-avatar {
  width: 50px;
  height: 50px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
}

.resource-avatar {
  border-radius: 50%;
}

.resource-info {
  flex: 1;
  min-width: 0;
}

.resource-title,
.resource-name {
  font-weight: 600;
  color: #333;
  font-size: 14px;
  margin-bottom: 2px;
}

.resource-artist {
  color: #666;
  font-size: 12px;
}

/* 可点击消息样式 */
.sidebar-message-item.clickable {
  cursor: pointer;
}

.sidebar-message-item.clickable:hover {
  background: #f6fff6;
  transform: translateX(2px);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .message-dialog :deep(.el-dialog) {
    width: 90% !important;
    margin: 10vh auto 0;
  }

  .message-item {
    padding: 16px 20px;
  }

  .message-actions {
    padding: 12px 20px;
  }

  .resource-cover,
  .resource-avatar {
    width: 40px;
    height: 40px;
  }
}
</style>
